<template>
  <div class="scroll-list-container">
    <scroll-view
      class="scroll-list"
      :scroll-y="true"
      @scroll="onScroll"
      :scroll-into-view="bottomId"
      :scroll-with-animation="animation"
      :scroll-top="scrollTop"
      :style="{ paddingBottom: getSafeBottom() + 'px' }"
    >
      <slot></slot>
      <div :id="id"></div>
    </scroll-view>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { debounce } from 'throttle-debounce';
import random from 'string-random';
import { useSystemInfo } from '@/hooks/useSystemInfo';

const { getSafeBottom } = useSystemInfo();

defineProps({
  scrollTop: {
    type: Number,
    default: 0,
  },
  animation: {
    type: Boolean,
    default: true,
  },
});

const bottomId = ref('');
const id = 'scroll-list-' + random(16);
const emit = defineEmits<{
  (e: 'scroll'): void;
}>();
const resetBottomId = debounce(100, () => {
  bottomId.value = '';
});
const onScroll = () => {
  emit('scroll');
  resetBottomId();
};
const scrollToBottom = () => {
  bottomId.value = id;
  resetBottomId();
};

defineExpose({ scrollToBottom });
</script>

<style lang="less" scoped></style>
